* {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

body {
	background: #525760;
	font-family: 'Roboto', 'San Fransisco', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.phone { background: url('http://matswainson.com/github/iphone.png') no-repeat;
	height: 675px;
	left: 50%;
	margin: -338px 0 0 -200px;
	position: absolute;
	top: 50%;
	width: 400px;
}

.onboard {
	background: white;
	border-radius: 2px;
	cursor: move;
	font-weight: 600;
	height: 424px;
	margin: 128px 0 0 74px;
	overflow: hidden;
	position: relative;
	width: 255px;
}

.slides {
	height: 424px;
	width: 1020px;
}

.slidesAnim {
	-moz-transition: all ease-in-out .2s;
	-ms-transition: all ease-in-out .2s;
	-o-transition: all ease-in-out .2s;
	-webkit-transition: all ease-in-out .2s;
	transition: all ease-in-out .2s;
}

.slide {
	color: #444;
	display: block;
	float: left;
	height: 424px;
	position: relative;
	text-align: center;
	width: 255px;
}

.fa {
	font-size: 72px;
	margin-top: 80px;
	margin-bottom: 10px;
}

.slide4 .fa {
	font-size: 44px;
	margin-top: 120px;
}

.slide4 .fa-hand-paper-o {
	margin-left: 12px;
}

.slide4 .fa-hand-scissors-o {
	margin-left: 8px;
}

h1 {
	font-size: 32px;
	margin-bottom: 10px;
}

p {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	opacity: .6;
	padding: 0 20px;
}

form {
	margin: 20px;
}

input, button, .skip {
	font-family: 'Roboto', 'San Fransisco', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 800;
}

input {
	border: 0;
	display: block;
	font-size: 16px;
	padding: 10px 0;
	text-indent: 10px;
	width: 100%;
}

input:focus {
	outline: none;
}

.nav {
	bottom: 64px;
	left: 50%;
	position: absolute;
	-moz-transition: all linear .3s;
	-ms-transition: all linear .3s;
	-o-transition: all linear .3s;
	-webkit-transition: all linear .3s;
	transition: all linear .3s;
	z-index: 100;
}

.active-slide--3 .nav,
.active-slide--3 .skip{
	opacity: 0;
	-moz-transform: translateY(60px);
	-ms-transform: translateY(60px);
	-o-transform: translateY(60px);
	-webkit-transform: translateY(60px);
	transform: translateY(60px);
}

.active-slide--3 .nav li:hover,
.active-slide--3 .skip:hover {
	cursor: drag;
}

.nav li {
	background: #fff;
	border-radius: 10px;
	cursor: pointer;
	display: block;
	float: left;
	height: 10px;
	margin: 0 6px;
	opacity: .2;
	-moz-transition: all linear .3s;
	-ms-transition: all linear .3s;
	-o-transition: all linear .3s;
	-webkit-transition: all linear .3s;
	transition: all linear .3s;
	width: 10px;
}

.nav li.active {
	opacity: .4;
}

.skip,
button{
	background: #222;
	border: 0;
	border-radius: 3px;
	box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.9);
	color: #ccc;
	cursor: pointer;
	display: block;
	font-size: 12px;
	padding: 11px 14px;
	text-decoration: none;
	text-transform: uppercase;
	z-index: 2;
}

button {
	display: block;
	padding: 11px 0;
	text-align: center;
	width: 100%;
}

.skip {
	bottom: 12px;
	left: 50%;
	margin-left: -58px;
	position: absolute;
	-moz-transition: all linear .3s;
	-ms-transition: all linear .3s;
	-o-transition: all linear .3s;
	-webkit-transition: all linear .3s;
	transition: all linear .3s;
}

.slide1,
.slide2,
.slide3,
.slide4 {
	color: white;
}

.slide1 {
	background-color: #534c7d;
}
.slide2 {
	background-color: #ab836a;
}
.slide3 {
	background-color: #6170c4;
}
.slide4 {
	background-color: #92bac6;
}

.progress {
	height: 6px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
}

.progress div {
	background: rgba(0,0,0,.3);
	height: 10px;
	-moz-transition: all ease-in-out .2s;
	-ms-transition: all ease-in-out .2s;
	-o-transition: all ease-in-out .2s;
	-webkit-transition: all ease-in-out .2s;
	transition: all ease-in-out .2s;
	width: 25%;
}

.active-slide--1 .progress div {
	width: 50%;
}

.active-slide--2 .progress div {
	width: 75%;
}

.active-slide--3 .progress div {
	width: 100%;
}